<template>
	<div class="worktime-container">
		<el-dialog title="绑定工作日规则" custom-class="addworktime-dialog" :visible.sync="showBindGroupWorkDayView" width="50%" :before-close="closeBindGroupWorkDays">
			<Table :tableData="tableData" ref="tableEle" @changeSelect="changeSelect" @currentChange="currentChange">
				<template v-slot:btn>
					<el-table-column width="310px" align="center" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" class="set-btn" @click="showDetailsWorkingDays(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</template>
			</Table>
			<div class="page">
				<PageSize class="page" :pages="selectWorkingDaysList.pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</div>
			<div class="btn">
				<el-button type="primary" class="" @click="apply">应用</el-button>
			</div>
			<AddWorkingDays
				v-if="showAddWorkingDays"
				:defaultWorkingName="defaultWorkingName"
				:titleWorkingDays="titleWorkingDays"
				:showSyncBtn="showSyncBtn"
				:showAddWorkingDays="showAddWorkingDays"
				:inputDisabled="inputDisabled"
				:calendarDaySelected="calendarDaySelected"
				:showCalendar="showCalendar"
				:showDetailsBtn="showDetailsBtn"
				@handleClose="handleClose"
			></AddWorkingDays>
		</el-dialog>
	</div>
</template>
<script>
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import Calendar from '../components/Calendar.vue';
import AddWorkingDays from '../components/AddWorkingDays.vue';
import { getWorkingDates } from '../../api/api';
import { mapMutations, mapState } from 'vuex';
export default {
	components: {
		Table,
		PageSize,
		Calendar,
		AddWorkingDays
	},
	computed: {
		...mapState({
			saveDates: state => state.Calendar.saveDates
		})
	},
	props: {
		showBindGroupWorkDayView: {
			type: Boolean,
			require: true,
			default: () => false
		},
		selectWorkingDaysList: {
			type: String,
			require: true,
			default: () => ''
		},
		tableData: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			showAddWorkingDays: false, //工作日规则组件状态
			calendarDaySelected: false, //日历组件可选与不可选状态
			showCalendar: false, //日历显示与隐藏
			showSyncBtn: false, //同步按钮显示与隐藏
			titleWorkingDays: '', //弹窗标题
			defaultWorkingName: '', //输入框默认值
			inputDisabled: false, //输入框禁止状态
			activeName: 'worktime', //表单model
			showDetailsBtn: false, //清空与确定按钮显示与隐藏
			selectWorkDayitemId: null, //选中的工作日规则id
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '规则名称',
						prop: 'name'
					},
					{
						label: '创建时间',
						prop: 'createdAt'
					},
					{
						label: '创建人ID',
						prop: 'userName'
					}
				],
				tableConent: [], //工作日列表数据
				showIndex: true,
				showCheck: false
			}
		};
	},
	created() {},
	mounted() {},
	methods: {
		...mapMutations('calendar', ['SAVE_DATES', 'SELECT_NOW_DAY_BY_YEAR', 'SET_SELECT_YEAR']),
		showDetailsWorkingDays(index, row) {
			this.setWorkingDays(row.id);
			this.showAddWorkingDays = true;
			this.showSyncBtn = false;
			this.titleWorkingDays = row.name;
			this.defaultWorkingName = row.name;
			this.calendarDaySelected = true;
			this.inputDisabled = true;
			this.showCalendar = true;
			this.showDetailsBtn = false;
		},
		//查看工作日规则方法
		setWorkingDays(id) {
			getWorkingDates(id)
				.then(res => {
					console.log(res.data);
					if (res.status === 200 && res.data.data.workDayDates.length !== 0) {
						let arrWorking = res.data.data.workDayDates.map(datas => {
							return {
								year: Number(datas.date.split('-')[0]),
								month: Number(datas.date.split('-')[1]),
								day: Number(datas.date.split('-')[2])
							};
						});
						this.$store.commit('SELECT_NOW_DAY_BY_YEAR', arrWorking);
						this.$store.commit('SAVE_DATES', arrWorking);
						this.showCalendar = true;
					}
				})
				.catch(err => {
					this.$message.error(`查询失败${err.message}`);
					console.log(err);
				});
		},
		//关闭日历弹窗
		handleClose() {
			this.showAddWorkingDays = false;
		},
		//关闭查看工作日
		closeBindGroupWorkDays() {
			this.$emit('closeBindGroupWorkDays');
		},
		//更新页数
		changePageSize(val) {
			this.$emit('changePageSizeWithWorkingDays', val);
		},
		//更新页数
		changeCurrentPage(val) {
			this.$emit('changeCurrentPageWithWorkingDays', val);
		},
		//选中的工作日规则id
		changeSelect(workDay) {
			this.selectWorkDayitemId = workDay.id;
		},
		//绑定工作日
		apply() {
			this.$emit('applyWithWorkDays', this.selectWorkDayitemId);
		}
	}
};
</script>
<style lang="less" scoped>
.worktime-container {
	.head {
		padding-bottom: 20px;
		.el-button {
			width: 84px;
			height: 36px;
			background-color: #6384fe;
			padding: 0;
		}
	}
	.set-btn {
		color: #fff;
		background-color: #6384fe;
	}
	.page {
		margin-top: 15px;
	}
	.btn {
		text-align: right;
		.el-button {
			background: #6384fe;
		}
	}
}
</style>
